<template>
  <div id="CateGories">
    <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-button class="add_button" type="primary" size="small" @click="AddClick">添加分类</el-button>
      <!-- 分类列表 -->
      <tree-table
        :data="ListData"
        :columns="columns"
        :show-index="true"
        :show-row-hover="true"
        :selection-type="false"
        :expand-type="false"
        index-text="#"
        border
      >
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
          <i :class="scope.row.cat_deleted ===false?'el-icon-success':'el-icon-error'" />
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag
            size="small"
            effect="dark"
            :type="scope.row.cat_level === 0?'':scope.row.cat_level === 1?'success':scope.row.cat_level === 2?'warning':''"
          >
            {{ scope.row.cat_level === 0? '一级':scope.row.cat_level === 1? '二级':scope.row.cat_level === 2? '三级':'' }}
          </el-tag>
        </template>
        <!-- 操作operation -->
        <template slot="operation" slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="EditData(scope.row)" />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="DeleteData(scope.row, scope.$index)" />
          </el-tooltip>
        </template>
      </tree-table>
      <!-- 分页 -->
      <el-pagination
        background
        :current-page="QueryInfor.pagenum"
        :page-sizes="[10, 15, 20, 25, 30, 35, 40]"
        :page-size="QueryInfor.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 弹窗区域 -->
    <!-- 添加分类 -->
    <el-dialog
      title="添加分类"
      :visible.sync="AddDialog"
      width="50%"
      :close-on-click-modal="false"
      @close="AddDialogClose"
    >
      <el-form
        ref="AddFormRef"
        :model="AddForm"
        :rules="AddFormRules"
        label-width="100px"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="AddForm.cat_name" maxlength="10" minlength="1" placeholder="请输入分类名称" clearable />
        </el-form-item>

        <el-form-item label="父级分类">
          <el-cascader
            v-model="CategorieValue"
            :options="CategoriesList"
            :props="Categoriesprops"
            :change-on-select="true"
            clearable
            style="width:100%"
            filterable
            @change="CategoriesChange"
          />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="AddDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="AddDialgOk('AddFormRef')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加用户END -->
    <!-- 编辑分类 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="EditDialog"
      width="50%"
      :close-on-click-modal="false"
      @close="EditDialogClose"
    >
      <el-form
        ref="EditFormRef"
        :model="EditForm"
        :rules="EditFormRules"
        label-width="100px"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="EditForm.cat_name" maxlength="10" minlength="1" placeholder="请输入分类名称" clearable />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="EditDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="EditDialgOk('EditFormRef')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加用户END -->
  </div>
</template>

<script>
export default {
  name: 'CateGories',
  data() {
    return {
      ListData: [], // 列表数据
      total: 0,
      // 数据参数
      QueryInfor: {
        type: 3,
        pagenum: 1, // 当前页
        pagesize: 10 // 每页显示条数
      },
      // 为Table指定列
      columns: [{
        label: '分类名称',
        prop: 'cat_name',
        headerAlign: 'center'
      }, {
        label: '是否有效',
        prop: 'cat_deleted',
        type: 'template', // 将当前列定义成模版列
        template: 'isok', // 表示当前这一列使用的模版名称
        align: 'center',
        headerAlign: 'center'
      }, {
        label: '排序',
        prop: 'cat_level',
        type: 'template', // 将当前列定义成模版列
        template: 'order', // 表示当前这一列使用的模版名称
        align: 'center',
        headerAlign: 'center'
      }, {
        label: '操作',
        type: 'template', // 将当前列定义成模版列
        template: 'operation', // 表示当前这一列使用的模版名称
        align: 'center',
        headerAlign: 'center'
      }],
      // 添加分类
      AddDialog: false,
      // 添加表单
      AddForm: {
        cat_pid: 0, // 分类父 ID
        cat_name: '', // 分类名称
        cat_level: 0 // `0`表示一级分类；`1`表示二级分类；`2`表示三级分类
      },
      // 添加验证
      AddFormRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 10, message: '分类名称的长度不能超过10 个字符', trigger: 'blur' }
        ]
      },
      // 父级分类列表
      CategoriesList: [],
      // 用来指定级联选择器配置对象
      Categoriesprops: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 选中的选择器id
      CategorieValue: [],
      // 编辑弹窗
      EditDialog: false,
      // 编辑表单
      EditForm: {
        cat_name: '' // 分类名称
      },
      // 编辑验证
      EditFormRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 10, message: '分类名称的长度不能超过10 个字符', trigger: 'blur' }
        ]
      },
      // 编辑id
      DataId: ''
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {
    this.GetTableData() // 获取数据
  },

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 获取数据
    async GetTableData() {
      console.log('获取数据')
      const { data: resData } = await this.$http.get('categories', { params: this.QueryInfor })
      if (resData.meta.status !== 200) {
        this.$message.error(resData.meta.msg)
      } else {
        console.log('获取列表数据', resData)
        this.ListData = resData.data.result
        this.total = resData.data.total
      }
    },
    // 获取父级分类的列表
    async GetCategoriesApi() {
      const { data: resData } = await this.$http.get('categories', { params: { type: 2 }})
      if (resData.meta.status !== 200) {
        this.$message.error(resData.meta.msg)
      } else {
        console.log('获取父级分类的列表', resData)
        this.CategoriesList = resData.data
      }
    },
    // 获取父级分类的值
    CategoriesChange(value) {
      console.log('获取父级分类的值', value)
      this.CategorieValue = value
      /*
      * 如果value中的length大于0证明选中了父级分类，否则就是没选中
      */
      if (this.CategorieValue.length > 0) {
        // 父级分类id
        this.AddForm.cat_pid = this.CategorieValue[this.CategorieValue.length - 1]
        // 当前分类等级
        this.AddForm.cat_level = this.CategorieValue.length
        return
      } else {
        this.AddForm.cat_pid = 0
        // 当前分类等级
        this.AddForm.cat_level = 0
      }
      this.CategorieValue = value
    },
    // 添加分类
    AddClick() {
      console.log('添加分类')
      this.GetCategoriesApi() // 获取父级分类的列表
      this.AddDialog = true
    },
    // 添加分类确定
    AddDialgOk(formName) {
      console.log('添加分类确定', this.AddForm)
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { data: resData } = await this.$http.post('categories', this.AddForm)
          if (resData.meta.status !== 201) {
            this.$message.error(resData.meta.msg)
          } else {
            this.$message.success(resData.meta.msg)
            this.AddDialog = false
            this.GetTableData() // 获取数据
          }
        } else {
          return false
        }
      })
    },
    // 监听添加对话框关闭事件
    AddDialogClose() {
      this.$refs.AddFormRef.resetFields()
      this.CategorieValue = []
      this.AddForm.cat_pid = 0
      this.AddForm.cat_level = 0
    },
    // 编辑分类
    async EditData(EditData) {
      console.log('编辑分类', EditData)
      this.DataId = EditData.cat_id
      const { data: resData } = await this.$http.get('categories/' + EditData.cat_id)
      console.log('根据 ID 查询用户信息', resData)
      if (resData.meta.status !== 200) {
        this.$message.error(resData.meta.msg)
      } else {
        this.EditForm = resData.data
      }
      this.EditDialog = true
    },
    // 监听编辑弹窗关闭
    EditDialogClose() {
      this.$refs.EditFormRef.resetFields()
    },
    // 编辑弹窗确定
    EditDialgOk(formName) {
      console.log('this.EidtForm', this.EditForm.cat_name)
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { data: resData } = await this.$http.put('categories/' + this.DataId, {
            cat_name: this.EditForm.cat_name
          })
          if (resData.meta.status !== 200) {
            this.$message.error(resData.meta.msg)
          } else {
            this.$message.success(resData.meta.msg)
            this.EditDialog = false
            this.GetTableData() // 获取数据
          }
        } else {
          return false
        }
      })
    },
    // 删除1.3.6
    async DeleteData(DeleteData, index) {
      console.log('删除', DeleteData, index)
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 数据保护机制（前两条无法删除，利用index>=1[从0开始]来判断）
      if (index > 1) {
        // 如果用户点击确定（确定删除） 返回confirm 否则(取消删除)返回cancel
        if (confirmResult === 'confirm') {
          const { data: resData } = await this.$http.delete('categories/' + DeleteData.cat_id)
          if (resData.meta.status !== 200) {
            this.$message.error(resData.meta.msg)
          } else {
            this.$message.success(resData.meta.msg)
            this.GetTableData() // 获取数据
          }
        } else {
          return this.$message.error('用户已取消删除')
        }
      } else {
        return this.$message.error('触发数据保护，表格前两条无法删除')
      }
    },
    // 监听pagesize改变事件
    handleSizeChange(newSize) {
      console.log('监听pagesize改变事件', newSize)
      this.QueryInfor.pagesize = newSize
      this.GetTableData()
    },
    // 监听页码页改变值
    handleCurrentChange(newCurrent) {
      console.log('监听页码页改变值', newCurrent)
      this.QueryInfor.pagenum = newCurrent
      this.GetTableData()
    }
  }
}
</script>

<style lang='scss' scoped>
  #CateGories{
    .el-icon-success{
      color: #67C23A;
    }
    .el-icon-error{
      color: #F56C6C;
    }
    .add_button{
      margin-bottom: 20px;
    }
  }
</style>
